<template>
	<div class="content">
		<div class="top_filter">
			<div class="top_filter_col">
				<el-button type="primary" size="small">
					新增
				</el-button>
			</div>
			<div class="top_filter_col">
				<el-button type="warning" size="small">
					修改
				</el-button>
			</div>
			<div class="top_filter_col">
				<el-button type="info" size="small">
					生成Key
				</el-button>
			</div>
			<div class="top_filter_col">
				<el-button type="danger" size="small">
					删除
				</el-button>
			</div>
		</div>
		<el-table
		  ref="multipleTable"
		  :data="tableData"
		  tooltip-effect="dark"
		  style="width: 100%"
		  @selection-change="handleSelectionChange">
		  <el-table-column
		    type="selection"
		    width="55">
		  </el-table-column>
		  <el-table-column
		    prop="name"
		    label="账号"
		    width="120">
		  </el-table-column>
		  <el-table-column
		    prop="name"
		    label="密码"
		    width="120">
		  </el-table-column>
		  <el-table-column
		    prop="name"
		    label="名字"
		    width="120">
		  </el-table-column>
		  <el-table-column
		    prop="name"
		    label="角色类型"
		    width="120">
		  </el-table-column>
		  <el-table-column
		    prop="api"
		    label="接口"
		    width="300">
		  </el-table-column>
		  <el-table-column
		    label="创建日期"
			prop="data"
		    width="120">
		    <template slot-scope="scope">{{ scope.row.date }}</template>
		  </el-table-column>
		  <el-table-column
		    label="修改时间"
			prop="data"
		    width="120">
		    <template slot-scope="scope">{{ scope.row.date }}</template>
		  </el-table-column>
		</el-table>
		<!-- <div style="margin-top: 20px">
		  <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
		  <el-button @click="toggleSelection()">取消选择</el-button>
		</div> -->
		<div class="pagination_box">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3"
			 :page-size="1"layout="total, prev, pager, next" :total="100">
			</el-pagination>
		</div>
	</div>
  
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
		  pwd:'123',
          name: '张给',
          api: '40ecab7477914f8496ece6376a7d2fa5',
		  acount:'admin',
		  type:'管理员'
        },{
          date: '2016-05-03',
		  pwd:'123',
          name: '王小虎',
          api: '40ecab7477914f8496ece6376a7d2fa5',
		  acount:'asdas',
		  type:'管理员'
        },{
          date: '2016-05-03',
		  pwd:'123',
          name: '关羽',
          api: '40ecab7477914f8496ece6376a7d2fa5',
		  acount:'ad21rfasmin',
		  type:'管理员'
        },{
          date: '2016-05-03',
		  pwd:'123',
          name: '刘备',
          api: '40ecab7477914f8496ece6376a7d2fa5',
		  acount:'addsfasmin',
		  type:'管理员'
        },{
          date: '2016-05-03',
		  pwd:'123',
          name: '杨宇',
          api: '40ecab7477914f8496ece6376a7d2fa5',
		  acount:'admin',
		  type:'管理员'
        },{
          date: '2016-05-03',
		  pwd:'123',
          name: '阿斯弗',
          api: '40ecab7477914f8496ece6376a7d2fa5',
		  acount:'admin',
		  type:'管理员'
        },{
          date: '2016-05-03',
		  pwd:'123',
          name: '大使馆',
          api: '40ecab7477914f8496ece6376a7d2fa5',
		  acount:'admin',
		  type:'管理员'
        },{
          date: '2016-05-03',
		  pwd:'123',
          name: '航天员',
          api: '40ecab7477914f8496ece6376a7d2fa5',
		  acount:'admin',
		  type:'管理员'
        },{
          date: '2016-05-03',
		  pwd:'123',
          name: '鲫鱼汤',
          api: '40ecab7477914f8496ece6376a7d2fa5',
		  acount:'admin',
		  type:'管理员'
        }],
        multipleSelection: []
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>